<template>
  <div class="wrap-header">

    <div class="top_banner" :style="banner_bg">
      <div class="role_name"> {{$store.getters.userInfo.name}} </div>
    </div>
    <search-person :search_type="search_type" ref="search_ref">
    <div  @click="changeShow()" class="search c_flex">
      渠道搜索
      <svg-icon class-name="icon_down m-left" icon-class="trigle" />
    </div>
    </search-person>
  </div>
</template>

<script>
  import SearchPerson from '@/components/HeadSearch/search'
  export default {
    name: 'HeadSearch',
    components: {
      SearchPerson,
    },
    props:{
      search_type: String,
    },
    methods: {
      changeShow() {
        this.$refs.search_ref.change_pop()
      }
    },
    data() {
      return {
        banner_bg: {
          background: "url(" + require("@/assets/header/bg.png") + ")",
          backgroundSize: "100vw auto",
          backgroundRepeat: "no-repeat",
        }
      }
    },
  }
</script>

<style lang="less" scoped>
  .wrap-header{
    
    .top_banner {
      height: 160px;
      width: 750px;
      padding-top: 62.43px;

      .role_name {
        color: #fff;
        font-size: 28px;
        text-align: center;
      }


    }

    .search {
      width: 640px;
      height: 70px;
      margin: -40px auto 30px;
      background-color: rgba(255, 255, 255, 1);
      border-radius: 8px;
      font-size: 22px;

      .icon_down {
        width: 15px;
        height: 13px;
      }
    }
  }
</style>